<template>
    <div v-bind:class="'common-size timeline-content timeline-content-bg-'+recordLen">
        <page-head :pageHead="pageHeadData"></page-head>
        <template v-for="(item,index) in chartData.chartData">
        <div v-bind:class="'timeline-record timeline-record-'+ (index+1) + ( (index+1)%2==0?' timeline-record-even':' timeline-record-odd' ) ">
            <div class="circle">{{index+1}}</div>
            <h2>{{item.value}}</h2>
            <h4>{{item.text_1}}</h4>
            <h4>{{item.text_2}}</h4>
            <h4>{{item.text_3}}</h4>
        </div>
        </template>


        <page-footer :pageFooter="pageFooterData"></page-footer>
    </div>
</template>

<script>


    import pageHead from './pageHead.vue'
    import PageFooter from "./pageFooter.vue";
    import {nuxtMixins} from '../assets/javascript/mixin'
    export default {
        name: 'standing_book',
      props:['chartData'],
      mixins: [nuxtMixins],
        data(){
            return {
              pageTitle: '合作时间轴',
            }
        },
        computed:{
          recordLen () {
            if(!this.$props.chartData.chartData) return
            return this.$props.chartData.chartData.length-2
          }
        },
        methods: {

        },
        mounted: function () {
        },
        components: {
          PageFooter,
          pageHead
        }


    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
    .timeline-content{
        width: 100%;
        height:100%;
        &.timeline-content-bg-1{
            background: url("../assets/images/time_1.png") no-repeat !important;
        }
        &.timeline-content-bg-2{
            background: url("../assets/images/time_2.png") no-repeat !important;
        }
        &.timeline-content-bg-3{
            background: url("../assets/images/time_3.png") no-repeat !important;
        }
        &.timeline-content-bg-4{
            background: url("../assets/images/time_4.png") no-repeat !important;
        }
        .timeline-record{
            width: 300px;
            height: 80px;
            position: absolute;
            .circle{
                width: 35px;
                height:35px;
                border-radius: 35px;
                background: #3470b7;
                text-align: center;
                line-height: 35px;
                font-size: 18px;
                font-weight: bold;
                color: #ffffff;
                position: absolute;
            }
            >h2{
                color: #333;
                font-size: 16px;
            }
            >h4{
                color: #666;
                font-size: 16px;
                font-weight: normal;
            }
            &.timeline-record-odd{
                .circle{
                    left: 0px;
                }
                >h2,>h4{
                    margin-left: 40px;
                }
            }
            &.timeline-record-even{
                .circle{
                    right: 0px;
                }
                >h2,>h4{
                    margin-right: 40px;
                    text-align: right;
                }
            }
            &.timeline-record-1{
                left: 487px;
                top: 201px;
            }
            &.timeline-record-2{
                right: 487px;
                top: 328px;
            }
            &.timeline-record-3{
                left: 487px;
                top: 456px;
            }
            &.timeline-record-4{
                right: 487px;
                top: 581px;
            }
            &.timeline-record-5{
                left: 487px;
                top: 712px;
            }
            &.timeline-record-6{
                right: 487px;
                top: 843px;
            }
        }
    }


</style>
